<template>
  <div class="div">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" class="el-icon-star-on">
        电子科技大学</el-menu-item
      >
    </el-menu>
    <div class="user">
      <span v-if="isLoading">正在登录...</span>
      <template v-else-if="user">
        <div class="demo-type">
        
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
         
        </div>
        <router-link to="">{{ user.username }}</router-link>
        <!-- @click.prevent阻止触发dom的原始事件，而去执行特定的事件 -->
        <a href="" @click.prevent="handleLoginOut">注销</a>
      </template>
      <template v-else>
        <router-link :to="{ name: 'Login' }">登录</router-link>
        <router-link :to="{ name: 'Reg' }">注册</router-link>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //引入mapState读取数据 channelStore仓库里面的state里面的channels数组
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  computed: {
    ...mapState("userStore", ["isLoading", "user"]),
  },
  methods: {
    handleLoginOut() {
      this.$store.dispatch("userStore/loginOut"); //访问userStore仓库里的loginOut方法删除token
      this.$router.push({ name: "Login" });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>


<style scoped>
.div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.div > h1 {
  margin: 0;
}
.div a {
  margin-left: 30px;
  text-decoration: none;
  color: black;
}
.div a:active {
  color: red;
}
.el-icon-star-on {
  font-size: 18px;
}
.demo-type{
  margin-left: -30px;
}
</style>